<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="full box-border transparent" style="
    padding: 30px 40px;overflow: auto">
    <ques-table :data="computedQuesData" v-loading="loading" @on-question-resort="reSort" :sort="sort"/>
    <div class="full-width">
      <el-pagination
        class="fr"
        style="margin: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="quesPages.curPage"
        :page-size="quesPages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="quesPages.total">
      </el-pagination>
    </div>
    <delete-dialog @del-success="getQuestions" />
    <batch-update-dialog />
  </div>
</template>

<script>
import api from '@/api'
import QuesTable from './QuesTable'
import BatchUpdateDialog from './BatchUpdateDialog'
import DeleteDialog from './DeleteDialog'

export default {
  data () {
    return {
      sort: {
        prop: 'gmt_create',
        order: 'descending'
      },
      loading: true,
      quesPages: {
        data: [],
        curPage: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  components: {
    QuesTable,
    BatchUpdateDialog,
    DeleteDialog
  },
  computed: {
    computedQuesData () {
      let quesData = this.quesPages.data
      if (quesData) {
        quesData.forEach((ques) => {
          ques.type = {
            value: ques.type,
            name: this.$converters.convertType(ques.type)
          }
          ques.level = {
            value: ques.level,
            name: this.$converters.convertLevel(ques.level)
          }
          let charArr = []
          for (let c in ques.answer) {
            charArr.push(String.fromCharCode(65 + parseInt(c)))
          }
          charArr.sort((a, b) => {
            if (a > b) {
              return 1
            } else if (a < b) {
              return -1
            }
            return 0
          })
          ques.answer = ''
          for (let i = 0; i < charArr.length; i++) {
            ques.answer += charArr[i]
          }
        })
      }
      return quesData
    }
  },
  mounted () {
    this.getQuestions()
    this.$bus.$on('refresh-question', () => {
      this.getQuestions()
    })
  },
  methods: {
    /**
     * 处理页面显示条数变化
     */
    handleSizeChange (size) {
      this.quesPages.pageSize = size
      this.getQuestions()
    },
    /**
     * 处理页面变化
     */
    handleCurrentChange (page) {
      this.quesPages.curPage = page
      this.getQuestions()
    },
    getQuestions (resort) {
      this.loading = true
      // 重排序则从第一页开始
      if (resort) {
        this.quesPages.curPage = 1
      }
      api.getQuestions(this.quesPages.curPage - 1, this.quesPages.pageSize, this.sort.prop, this.sort.order === 'ascending')
        .then(api.commonResp((success, data) => {
          if (success) {
            data.curPage++
            this.quesPages = data
          } else {
            this.$message(data)
          }
          this.loading = false
        })).catch(() => {
          this.$message('出错了')
          this.loading = false
        })
    },
    reSort (sort) {
      this.sort = sort
      this.getQuestions(true)
    }
  }
}
</script>

<style scoped lang="less">
</style>
